import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import imgContextPng from './assets/imgContext.jpg'
// navList
class NavList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      navList: [
        "校友关系图谱",
        "学校关系图谱",
        "校友就业去向动态趋势",
        "区域校友联谊",
        "心系母校",
      ],
    };
  }
  render() {
    return (
      <div className="navList">
        <ul>
          {this.state.navList.map((nav) => (
            <li key={nav}>{nav}</li>
          ))}
        </ul>
      </div>
    );
  }
}
// 定义头部组件
class Header extends React.Component {
  render() {
    return (
      <div className="Header">
        <h1 className="logo">莘友网</h1>
        <NavList />
        <div className="userOption">
          <div className="userInfo">
            <span>个人信息</span>
          </div>
          <button id="btn_sign">注册/登录</button>
        </div>
      </div>
    );
  }
}
// Body组件
class Body extends React.Component{
  render(){
    return (
      <div className="Body">
        <div className="leftBox">
          <div className="bigFont">
            学校关系图谱之学生流动
          </div>
          <div className="secBigFont">
            展示两校学生流动关系图谱，主要为第一院校升学（考研/考博）到另一院校的学生流动量，通过连接线条的数量、颜色表示。
          </div>
          <div className="searchBox">
            <button id="searchBtn">搜索</button>
            <input type="text" name="" id="searchInput" placeholder="请输入你想要查询的院校名称"/>
          </div>
        </div>
        <div className="rightBox">
          <img src={imgContextPng} alt="" />
        </div>
      </div>
    )
  }
}
class Root extends React.Component {
  render() {
    return (
      <div className="Root">
        <Header />
        <Body />
      </div>
    );
  }
}

ReactDOM.render(<Root />, document.getElementById("root"));
